<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>学生信息表</p>
    <ul id="list"></ul>

    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

    <script type="text/html" id="tpl-students"> 
        {{each students}}

            <li>{{$value.name}} {{$value.sex}} {{$value.age}}  </li>
            
        {{/each}}
    </script>

    <script>
      const students = [
        {
          name: "云牧",
          age: 18,
          sex: "male",
        },
        {
          name: "夕颜",
          age: 16,
          sex: "female",
        },
        {
          name: "林黛玉",
          age: 20,
          sex: "female",
        },
      ];

      //  1.使用模板字符串
      //const list = document.getElementById("list");

      //let html = ""

      //for(const item of students){

      //    html += `<li>${item.name} ${item.sex} ${item.age}</li>`

      //}

      //list.innerHTML = html;

      //2.使用模板引擎--art-template

      //2.1.引入 art-template

      // 2.2.准备好模板

      // 2.3.获取模板


      const list = document.getElementById("list");

      list.innerHTML = template("tpl-students",{
        students:students
      })
    </script>
  </body>
</html>
